<template>
  <view class="wrapper">
    <view class="info-box">
      <input :placeholder="$t('index.Comment-Name')" v-model="nickName" class="input" />
      <u-button :text="$t('index.Submit')" class="btn" @click="handleSubmit"></u-button>
    </view>
  </view>
</template>

<script>
import { updateUserInfo } from "@/services/user";
import { mapState } from "vuex";
export default {
  data() {
    return {
      nickName: "",
    };
  },
  computed: {
    ...mapState(["userInfo", "friendsList"]),
  },
  methods: {
    async handleSubmit() {
      const resp = await updateUserInfo({
        nickName: this.nickName,
      });
      if (!resp.success) return;
      uni.navigateBack();
    },
  },
  onLoad(option) {
    this.nickName=this.userInfo.nickName
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  box-sizing: border-box;
  padding: 40upx;
  .info-box {
    background: #ffffff;
    border-radius: 20upx;
    box-sizing: border-box;
    padding: 10upx 50upx 50upx;
    .input {
      margin-top: 40upx;
      width: 100%;
      height: 94upx;
      background: #f6f6f6;
      border-radius: 20upx;
      box-sizing: border-box;
      padding: 0 36upx;
      font-size: 26upx;
      font-weight: 400;
      color: #000000;
    }
    .btn {
      margin-top: 40upx;
      width: 100%;
      height: 90upx;
      background: #61bdb2;
      border-radius: 20upx;
      font-size: 30upx;
      font-weight: 400;
      color: #fffefe;
    }
  }
}
</style>
